<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass iOS 26 Generator – Create Apple-Style Effects with CSS & HTML</title>

    <meta name="description"
          content="Try the liquid glass iOS 26 generator to create Apple-style effects. Customize your own iPhone liquid glass design with blur, transparency, and colors. Copy clean CSS & HTML code instantly. What is liquid glass? Explore now.">

    <meta name="keywords"
          content="liquid glass, liquid glass ios 26, liquid glass apple, iphone liquid glass, is liquid glass, liquid glass generator, glassmorphism, apple blur effect, ios 26 design, css glass effect, html liquid glass, apple style ui">

    <!-- Open Graph for social media previews -->
    <meta property="og:title" content="Liquid Glass iOS 26 Generator – Apple Blur Effects with Code"/>
    <meta property="og:description"
          content="Create iPhone-style liquid glass effects like iOS 26. Customize blur, transparency, and colors, and copy the CSS/HTML code instantly."/>
    <meta property="og:url" content="https://www.liquid-glass.pro/generator.html"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="https://www.liquid-glass.pro/img/preview-liquid-glass.jpg"/>
    <meta name="google-adsense-account" content="ca-pub-1246051173479507">
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="Liquid Glass iOS 26 Generator – Apple Blur Effects with Code"/>
    <meta name="twitter:description"
          content="Try our iOS 26-style liquid glass generator. Customize and export Apple-inspired blur effects with CSS & HTML code."/>
    <meta name="twitter:image" content="https://www.liquid-glass.pro/img/preview-liquid-glass.jpg"/>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1246051173479507"
            crossorigin="anonymous"></script>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;500;700&family=Lato:wght@400;700&family=Montserrat:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap"
          rel="stylesheet">

    <link rel="icon" href="/img/favicon.ico">
    <style>
        :root {
            --inner-shadow-color: rgba(255, 255, 255, 0.7);
            --inner-shadow-blur: 20px;
            --inner-shadow-spread: -5px;
            --glass-tint-color: 255, 255, 255;
            --glass-tint-opacity: 0.4;
            --frost-blur-radius: 2px;
            --noise-frequency: 0.008;
            --noise-strength: 77;
            --glass-width: 300px;
            --glass-height: 200px;
            --glass-border-radius: 28px;
            --text-color: #ffffff;
            --text-size: 24px;
            --text-weight: 400;
            --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            --text-opacity: 1;
            --text-offset-x: 0;
            --text-offset-y: 0;
            --text-font-family: "'Microsoft YaHei', '微软雅黑', Arial, sans-serif";
        }

        /* 添加標題區域樣式 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 2000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header-title {
            color: #fff;
            font-size: 24px;
            font-weight: 500;
            font-family: var(--text-font-family);
        }

        .back-button {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .back-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .back-button svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            position: static;
            overflow: visible;
        }

        /* 調整現有樣式以適應新的標題區域 */
        body {
            margin: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            font-family: sans-serif;
            background: url('https://static.liquid-glass.pro/img/background-5.jpg') center/cover no-repeat;
            overflow: hidden;
            padding-top: 60px; /* 為標題區域留出空間 */
        }

        .control-panel {
            width: 350px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
            height: calc(100vh - 60px); /* 調整高度以適應標題區域 */
        }

        .control-group {
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 15px;
        }

        .control-group:last-child {
            border-bottom: none;
        }

        .control-group h3 {
            margin-bottom: 10px;
            font-size: 16px;
            color: #fff;
        }

        .control-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .control-row label {
            width: 80px;
            display: inline-block;
            font-size: 14px;
        }

        .control-row input[type="range"] {
            flex: 1;
            margin: 0 10px;
        }

        .control-row input[type="number"] {
            width: 80px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            padding: 6px 8px;
            border-radius: 6px;
            margin-left: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .control-row input[type="number"]:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.4);
            background-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
        }

        .control-row input[type="number"]::-webkit-inner-spin-button,
        .control-row input[type="number"]::-webkit-outer-spin-button {
            opacity: 1;
            height: 24px;
            cursor: pointer;
        }

        .control-row .unit {
            margin-left: 8px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }

        .control-row span {
            width: 40px;
            display: inline-block;
            text-align: right;
            font-size: 14px;
        }

        .color-picker {
            width: 24px;
            height: 24px;
            border: none;
            cursor: pointer;
            padding: 0;
            margin-left: 10px;
        }

        /* Glass Container Styles */
        .glass-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .glass-div {
            width: var(--glass-width);
            height: var(--glass-height);
            border-radius: var(--glass-border-radius);
            cursor: move;
            isolation: isolate;
            touch-action: none;
            box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2);
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;

            background: none;
            border: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
            outline: none;
            box-sizing: border-box;
        }

        .glass-div:focus {
            outline: none;
        }

        .glass-text {
            position: relative;
            color: var(--text-color);
            font-size: var(--text-size);
            font-weight: var(--text-weight);
            text-shadow: var(--text-shadow);
            opacity: var(--text-opacity);
            transform: translate(var(--text-offset-x), var(--text-offset-y));
            font-family: var(--text-font-family);
        }

        .glass-div::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            border-radius: var(--glass-border-radius);
            box-shadow: inset 0 0 var(--inner-shadow-blur) var(--inner-shadow-spread) var(--inner-shadow-color);
            background-color: rgba(var(--glass-tint-color), calc(var(--glass-tint-opacity) / 100));
        }

        .glass-div::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: var(--glass-border-radius);
            backdrop-filter: blur(var(--frost-blur-radius));
            filter: url(#glass-distortion);
            isolation: isolate;
            -webkit-backdrop-filter: blur(var(--frost-blur-radius));
            -webkit-filter: url("#glass-distortion");
        }

        /* 修改 SVG 樣式，只針對玻璃效果的 SVG */
        .glass-container svg {
            width: 0;
            height: 0;
            position: absolute;
            overflow: hidden;
        }

        /* Copy Buttons Styles */
        .copy-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .copy-button {
            margin-top: 10px;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .copy-button:hover {
            background-color: #1d4ed8;
        }

        .copy-button:active {
            background-color: #1e40af;
        }

        .copy-success {
            font-size: 12px;
            color: #10b981;
            margin-top: 5px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .copy-success.show {
            opacity: 1;
        }

        .vue-tutorial-link {
            display: block;
            color: #60a5fa;
            text-decoration: none;
            font-size: 12px;
            text-align: center;
            transition: color 0.2s;
        }

        .vue-tutorial-link:hover {
            color: #3b82f6;
            text-decoration: underline;
        }

        /* Code Preview Area Styles */
        .code-preview {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            font-family: monospace;
            font-size: 12px;
            color: #e2e8f0;
            max-height: 150px;
            overflow-y: auto;
            white-space: pre;
            word-break: normal;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: #2563eb #222c37;
        }

        .code-preview-container {
            margin-top: 15px;
        }

        .code-preview-container h4 {
            margin: 0 0 8px 0;
            font-size: 14px;
            color: #e2e8f0;
        }

        .element-select {
            background-color: rgba(30, 41, 59, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            padding: 4px 8px;
            border-radius: 6px;
            margin-left: 10px;
            font-size: 14px;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .element-select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 2px #2563eb44;
        }

        .element-select option {
            background: #222c37;
            color: #fff;
        }

        /* Optimized Scrollbar Styles (Webkit) */
        .code-preview::-webkit-scrollbar {
            height: 8px;
            width: 8px;
            background: #222c37;
            border-radius: 4px;
        }

        .code-preview::-webkit-scrollbar-thumb {
            background: #2563eb;
            border-radius: 4px;
        }

        .code-preview::-webkit-scrollbar-thumb:hover {
            background: #1d4ed8;
        }

        /* Textarea Scrollbar Styles */
        .text-input::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        .text-input::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            transition: background 0.2s ease;
        }

        .text-input::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .text-input::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .text-input {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 900px) {
            .control-panel {
                width: 100vw;
                height: 48px;
                max-height: 48px;
                position: fixed;
                top: 60px;
                left: 0;
                right: 0;
                z-index: 1000;
                padding: 0 16px;
                overflow: hidden;
                transition: max-height 0.3s cubic-bezier(.4, 0, .2, 1);
                border-radius: 0;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
                display: flex;
                align-items: center;
            }

            .control-panel.expanded {
                max-height: calc(100vh - 60px);
                height: auto;
                overflow-y: auto;
                padding: 20px;
                display: block;
            }

            .control-panel .control-group,
            .control-panel .copy-buttons,
            .control-panel .code-preview-container {
                display: none;
            }

            .control-panel.expanded .control-group,
            .control-panel.expanded .copy-buttons,
            .control-panel.expanded .code-preview-container {
                display: block;
            }

            .control-panel-toggle {
                display: block;
                top: 60px;
            }

            .glass-container {
                margin-top: 108px;
            }

            .scroll-hint {
                display: none;
            }

            .control-panel.expanded .scroll-hint {
                display: block;
                margin-top: 0;
            }
        }

        @media (min-width: 901px) {
            .control-panel-toggle {
                display: none !important;
            }
        }

        .control-panel-toggle {
            width: 100vw;
            height: 48px;
            background: rgba(0, 0, 0, 0.85);
            color: #fff;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 0 16px;
            position: fixed;
            left: 0;
            z-index: 1100;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
            user-select: none;
            transition: background 0.2s;
        }

        .control-panel-toggle .toggle-icon {
            font-size: 22px;
            margin-left: 0;
            margin-right: 20px;
            transition: transform 0.3s;
        }

        .control-panel.expanded + .control-panel-toggle .toggle-icon {
            transform: rotate(180deg);
        }

        .liquid-glass ul,
        .liquid-glass ol {
            list-style-position: inside;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .liquid-glass li {
            margin: 5px 0;
            padding: 0 10px;
        }

        .liquid-glass ul li {
            list-style-type: disc;
        }

        .liquid-glass ol li {
            list-style-type: decimal;
        }

        /* 添加提示訊息樣式 */
        .scroll-hint {
            background-color: rgba(37, 99, 235, 0.9);
            color: white;
            padding: 5px;
            text-align: center;
            font-size: 12px;
            border-radius: 6px;
            margin-bottom: 15px;
            margin-top: 10px;
            cursor: pointer;
        }

        @media (max-width: 900px) {
            .control-panel:not(.expanded) .scroll-hint {
                display: none;
            }

            .control-panel.expanded .scroll-hint {
                display: block;
                margin-top: 48px;
            }
        }

    </style>
</head>

<body>
<!-- 添加標題區域 -->
<header class="header">
    <h1 class="header-title">Liquid Glass CSS Generator</h1>
    <a href="/" class="back-button">
        <svg viewBox="0 0 24 24">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
        Back to Home
    </a>
</header>

<!-- Glass Effect Container -->
<div class="glass-container">
    <div class="glass-div"></div>
    <!-- SVG Filter Definition -->
    <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise"/>
                <feGaussianBlur in="noise" stdDeviation="2" result="blurred"/>
                <feDisplacementMap in="SourceGraphic" in2="blurred" scale="77" xChannelSelector="R"
                                   yChannelSelector="G"/>
            </filter>
        </defs>
    </svg>
</div>

<!-- Control Panel -->
<div class="control-panel" id="controlPanel">
    <div class="scroll-hint">Scroll down for more options and code export ▼</div>
    <div class="control-group">
        <h3>Container Settings</h3>
        <div class="control-row">
            <label>Element Type:</label>
            <select id="elementType" class="element-select">
                <option value="div">div</option>
                <option value="button">button</option>
                <option value="a">a</option>
                <option value="span">span</option>
                <option value="p">p</option>
                <option value="ul">ul</option>
                <option value="ol">ol</option>
            </select>
        </div>
        <div class="control-row">
            <label>Width:</label>
            <input type="number" id="glassWidthInput" value="300">
            <span class="unit">px</span>
        </div>
        <div class="control-row">
            <label>Height:</label>
            <input type="number" id="glassHeightInput" value="200">
            <span class="unit">px</span>
        </div>
        <div class="control-row">
            <label>Border Radius:</label>
            <input type="number" id="glassBorderRadius" min="0" max="100" value="28">
            <span class="unit">%</span>
        </div>
    </div>
    <div class="control-group">
        <h3>Inner Shadow</h3>
        <div class="control-row">
            <label>Color:</label>
            <input type="color" class="color-picker" id="innerShadowColor" value="#ffffff70">
        </div>
        <div class="control-row">
            <label>Blur:</label>
            <input type="range" id="innerShadowBlur" min="0" max="80" value="15">
            <span id="innerShadowBlurValue">15</span>px
        </div>
        <div class="control-row">
            <label>Spread:</label>
            <input type="range" id="innerShadowSpread" min="-20" max="20" value="-5">
            <span id="innerShadowSpreadValue">-5</span>px
        </div>
    </div>
    <div class="control-group">
        <h3>Glass Tint</h3>
        <div class="control-row">
            <label>Tint Color:</label>
            <input type="color" class="color-picker" id="glassTintColor" value="#ffffff">
        </div>
        <div class="control-row">
            <label>Opacity:</label>
            <input type="range" id="glassTintOpacity" min="0" max="100" value="0">
            <span id="glassTintOpacityValue">0</span>%
        </div>
    </div>
    <div class="control-group">
        <h3>Frost Blur</h3>
        <div class="control-row">
            <label>Blur Radius:</label>
            <input type="range" id="frostBlurRadius" min="0" max="20" value="0">
            <span id="frostBlurRadiusValue">0</span>px
        </div>
    </div>
    <div class="control-group">
        <h3>Noise Distortion</h3>
        <div class="control-row">
            <label>Noise Frequency:</label>
            <input type="range" id="noiseFrequency" min="0.001" max="0.02" step="0.001" value="0.008">
            <span id="noiseFrequencyValue">0.008</span>
        </div>
        <div class="control-row">
            <label>Strength:</label>
            <input type="range" id="noiseStrength" min="0" max="200" value="77">
            <span id="noiseStrengthValue">77</span>
        </div>
    </div>
    <div class="control-group">
        <h3>Background Control</h3>
        <div class="control-row" style="justify-content: center; gap: 10px;">
            <button id="prevBgBtn" class="copy-button" style="margin: 0;">Previous</button>
            <button id="nextBgBtn" class="copy-button" style="margin: 0;">Next</button>
        </div>
    </div>
    <div class="control-group">
        <h3>Text Settings</h3>
        <div class="control-row">
            <label>Text Content:</label>
            <textarea id="glassText" class="text-input" rows="4"
                      style="width: 100%; margin-top: 5px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 8px; border-radius: 6px; resize: vertical;">Liquid Glass</textarea>
        </div>
        <div class="control-row">
            <label>Text Color:</label>
            <input type="color" class="color-picker" id="textColor" value="#ffffff">
        </div>
        <div class="control-row">
            <label>Text Size:</label>
            <input type="number" id="textSize" value="24">
            <span class="unit">px</span>
        </div>
        <div class="control-row">
            <label>Font Weight:</label>
            <input type="number" id="textWeight" min="100" max="900" step="100" value="400">
        </div>
        <div class="control-row">
            <label>Text Opacity:</label>
            <input type="range" id="textOpacity" min="0" max="100" value="100">
            <span id="textOpacityValue">100</span>%
        </div>
        <div class="control-row">
            <label>Text X Offset:</label>
            <input type="range" id="textOffsetX" min="-50" max="50" value="0">
            <span id="textOffsetXValue">0</span>px
        </div>
        <div class="control-row">
            <label>Text Y Offset:</label>
            <input type="range" id="textOffsetY" min="-50" max="50" value="0">
            <span id="textOffsetYValue">0</span>px
        </div>
        <div class="control-row">
            <label>Shadow X Offset:</label>
            <input type="range" id="textShadowX" min="-20" max="50" value="0">
            <span id="textShadowXValue">0</span>px
        </div>
        <div class="control-row">
            <label>Shadow Y Offset:</label>
            <input type="range" id="textShadowY" min="-20" max="50" value="2">
            <span id="textShadowYValue">2</span>px
        </div>
        <div class="control-row">
            <label>Shadow Blur:</label>
            <input type="range" id="textShadowBlur" min="0" max="50" value="4">
            <span id="textShadowBlurValue">4</span>px
        </div>
        <div class="control-row">
            <label>Shadow Opacity:</label>
            <input type="range" id="textShadowOpacity" min="0" max="100" value="20">
            <span id="textShadowOpacityValue">20</span>%
        </div>
        <div class="control-row">
            <label>Font Family:</label>
            <select id="textFontFamily" class="element-select">
                <option value="'Georgia', 'Microsoft YaHei', '微软雅黑', serif">Georgia</option>
                <option value="Arial, 'Microsoft YaHei', '微软雅黑', sans-serif">Arial</option>
                <option value="'Times New Roman', 'Microsoft YaHei', '微软雅黑', Times, serif">Times New Roman</option>
                <option value="'Courier New', 'Microsoft YaHei', '微软雅黑', Courier, monospace">Courier New</option>

                <option value="'SimSun', Arial, '宋体', serif">SimSun / Arial</option>
                <option value="'Verdana', 'Microsoft YaHei', '微软雅黑', sans-serif">Verdana</option>
                <option value="'Tahoma', 'Microsoft YaHei', '微软雅黑', sans-serif">Tahoma</option>
                <option value="'Trebuchet MS', 'Microsoft YaHei', '微软雅黑', sans-serif">Trebuchet MS</option>
                <option value="'Impact', 'Microsoft YaHei', '微软雅黑', sans-serif">Impact</option>
                <option value="'PingFang SC', Arial, 'Hiragino Sans GB', '微软雅黑', Helvetica, sans-serif">PingFang
                    SC
                </option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <h3>Code Export</h3>
        <div class="code-preview-container">
            <h4>HTML Code Preview:</h4>
            <div class="code-preview" id="htmlCodePreview"></div>
        </div>
        <div class="copy-buttons">
            <button id="copyHtmlBtn" class="copy-button">Copy Container Source</button>
            <div id="copyHtmlSuccess" class="copy-success">Copied Successfully!</div>
        </div>
        <div class="code-preview-container">
            <h4>CSS Code Preview:</h4>
            <div class="code-preview" id="cssCodePreview"></div>
        </div>
        <div class="copy-buttons">
            <button id="copyCssBtn" class="copy-button">Copy Container Style</button>
            <div id="copyCssSuccess" class="copy-success">Copied Successfully!</div>
        </div>
        <div class="code-preview-container">
            <h4>Vue Component Props:</h4>
            <div class="code-preview" id="vuePropsPreview"></div>
        </div>
        <div class="copy-buttons">
            <button id="copyVuePropsBtn" class="copy-button">Copy Vue Props</button>
            <div id="copyVuePropsSuccess" class="copy-success">Copied Successfully!</div>
            <a href="/doc/vue.html" class="vue-tutorial-link">Copy to Vue component and click here for Vue component
                tutorial</a>
        </div>
        <div class="code-preview-container">
            <h4>React Component Props:</h4>
            <div class="code-preview" id="reactPropsPreview"></div>
        </div>
        <div class="copy-buttons">
            <button id="copyReactPropsBtn" class="copy-button">Copy React Props</button>
            <div id="copyReactPropsSuccess" class="copy-success">Copied Successfully!</div>
            <a href="/doc/react.html" class="vue-tutorial-link">Copy to React component and click here for React
                component tutorial</a>
        </div>
    </div>
</div>
<div class="control-panel-toggle" id="controlPanelToggle">
    <span>Settings</span>
    <span class="toggle-icon">▼</span>
</div>

<script>
    // Get all control elements
    const innerShadowColor = document.getElementById('innerShadowColor');
    const innerShadowBlur = document.getElementById('innerShadowBlur');
    const innerShadowBlurValue = document.getElementById('innerShadowBlurValue');
    const innerShadowSpread = document.getElementById('innerShadowSpread');
    const innerShadowSpreadValue = document.getElementById('innerShadowSpreadValue');
    const glassTintColor = document.getElementById('glassTintColor');
    const glassTintOpacity = document.getElementById('glassTintOpacity');
    const glassTintOpacityValue = document.getElementById('glassTintOpacityValue');
    const frostBlurRadius = document.getElementById('frostBlurRadius');
    const frostBlurRadiusValue = document.getElementById('frostBlurRadiusValue');
    const noiseFrequency = document.getElementById('noiseFrequency');
    const noiseFrequencyValue = document.getElementById('noiseFrequencyValue');
    const noiseStrength = document.getElementById('noiseStrength');
    const noiseStrengthValue = document.getElementById('noiseStrengthValue');
    const glassWidth = document.getElementById('glassWidth');
    const glassWidthValue = document.getElementById('glassWidthValue');
    const glassHeight = document.getElementById('glassHeight');
    const glassHeightValue = document.getElementById('glassHeightValue');
    const glassBorderRadius = document.getElementById('glassBorderRadius');
    const glassBorderRadiusValue = document.getElementById('glassBorderRadiusValue');
    const filterEl = document.querySelector('#glass-distortion feTurbulence');
    const displacementEl = document.querySelector('#glass-distortion feDisplacementMap');
    let glassDiv = document.querySelector('.glass-div');
    const copyHtmlBtn = document.getElementById('copyHtmlBtn');
    const copyCssBtn = document.getElementById('copyCssBtn');
    const copyHtmlSuccess = document.getElementById('copyHtmlSuccess');
    const copyCssSuccess = document.getElementById('copyCssSuccess');
    const htmlCodePreview = document.getElementById('htmlCodePreview');
    const cssCodePreview = document.getElementById('cssCodePreview');
    const vuePropsPreview = document.getElementById('vuePropsPreview');
    const copyVuePropsBtn = document.getElementById('copyVuePropsBtn');
    const copyVuePropsSuccess = document.getElementById('copyVuePropsSuccess');
    const glassWidthInput = document.getElementById('glassWidthInput');
    const glassHeightInput = document.getElementById('glassHeightInput');
    const glassText = document.getElementById('glassText');
    const textColor = document.getElementById('textColor');
    const textSize = document.getElementById('textSize');
    const textWeight = document.getElementById('textWeight');
    const textOpacity = document.getElementById('textOpacity');
    const textOpacityValue = document.getElementById('textOpacityValue');
    const textOffsetX = document.getElementById('textOffsetX');
    const textOffsetY = document.getElementById('textOffsetY');
    const textOffsetXValue = document.getElementById('textOffsetXValue');
    const textOffsetYValue = document.getElementById('textOffsetYValue');
    const textShadowX = document.getElementById('textShadowX');
    const textShadowY = document.getElementById('textShadowY');
    const textShadowBlur = document.getElementById('textShadowBlur');
    const textShadowOpacity = document.getElementById('textShadowOpacity');
    const textShadowXValue = document.getElementById('textShadowXValue');
    const textShadowYValue = document.getElementById('textShadowYValue');
    const textShadowBlurValue = document.getElementById('textShadowBlurValue');
    const textShadowOpacityValue = document.getElementById('textShadowOpacityValue');
    const elementType = document.getElementById('elementType');
    const textFontFamily = document.getElementById('textFontFamily');
    const reactPropsPreview = document.getElementById('reactPropsPreview');
    const copyReactPropsBtn = document.getElementById('copyReactPropsBtn');
    const copyReactPropsSuccess = document.getElementById('copyReactPropsSuccess');


    // Background image array
    const backgrounds = [
        "https://static.liquid-glass.pro/img/background-1.jpg",
        "https://static.liquid-glass.pro/img/background-2.jpg",
        "https://static.liquid-glass.pro/img/background-3.jpg",
        "https://static.liquid-glass.pro/img/background-4.jpg",
        "https://static.liquid-glass.pro/img/background-6.jpg",
        "https://static.liquid-glass.pro/img/background-7.jpg",
        "https://static.liquid-glass.pro/img/background-5.jpg"

    ];
    let currentBgIndex = 0;

    // Background switching buttons
    const prevBgBtn = document.getElementById('prevBgBtn');
    const nextBgBtn = document.getElementById('nextBgBtn');

    // Background switching function
    function changeBackground(direction) {
        if (direction === 'next') {
            currentBgIndex = (currentBgIndex + 1) % backgrounds.length;
        } else {
            currentBgIndex = (currentBgIndex - 1 + backgrounds.length) % backgrounds.length;
        }
        document.body.style.backgroundImage = `url('${backgrounds[currentBgIndex]}')`;
    }

    // Bind background switching events
    prevBgBtn.addEventListener('click', () => changeBackground('prev'));
    nextBgBtn.addEventListener('click', () => changeBackground('next'));

    // Update display function
    function updateDisplay() {
        // Update element type
        const currentType = glassDiv.tagName.toLowerCase();
        if (currentType !== elementType.value) {
            const newElement = document.createElement(elementType.value);
            newElement.className = 'glass-div';
            newElement.innerHTML = glassDiv.innerHTML;
            glassDiv.parentNode.replaceChild(newElement, glassDiv);
            glassDiv = newElement;
            bindDragEvents(glassDiv); // Rebind drag events
        }

        // Container size
        const width = parseInt(glassWidthInput.value) || 0;
        const height = parseInt(glassHeightInput.value) || 0;
        document.documentElement.style.setProperty('--glass-width', `${width}px`);
        document.documentElement.style.setProperty('--glass-height', `${height}px`);

        // Update text offset range
        const maxOffsetX = Math.floor(width / 2);
        const maxOffsetY = Math.floor(height / 2);
        textOffsetX.min = -maxOffsetX;
        textOffsetX.max = maxOffsetX;
        textOffsetY.min = -maxOffsetY;
        textOffsetY.max = maxOffsetY;

        // Ensure current offset value is within range
        if (parseInt(textOffsetX.value) > maxOffsetX) textOffsetX.value = maxOffsetX;
        if (parseInt(textOffsetX.value) < -maxOffsetX) textOffsetX.value = -maxOffsetX;
        if (parseInt(textOffsetY.value) > maxOffsetY) textOffsetY.value = maxOffsetY;
        if (parseInt(textOffsetY.value) < -maxOffsetY) textOffsetY.value = -maxOffsetY;

        // Calculate actual border radius value (percentage of smaller dimension)
        const borderRadiusPercent = parseInt(glassBorderRadius.value) || 0;
        const borderRadiusValue = Math.min(width, height) * (borderRadiusPercent / 100);
        document.documentElement.style.setProperty('--glass-border-radius', `${borderRadiusValue}px`);

        // Inner shadow
        document.documentElement.style.setProperty('--inner-shadow-color', innerShadowColor.value);
        innerShadowBlurValue.textContent = innerShadowBlur.value;
        document.documentElement.style.setProperty('--inner-shadow-blur', `${innerShadowBlur.value}px`);
        innerShadowSpreadValue.textContent = innerShadowSpread.value;
        document.documentElement.style.setProperty('--inner-shadow-spread', `${innerShadowSpread.value}px`);

        // Glass tint
        const tintRgb = hexToRgb(glassTintColor.value);
        document.documentElement.style.setProperty('--glass-tint-color', `${tintRgb.r}, ${tintRgb.g}, ${tintRgb.b}`);
        glassTintOpacityValue.textContent = glassTintOpacity.value;
        document.documentElement.style.setProperty('--glass-tint-opacity', glassTintOpacity.value);

        // Frost blur
        frostBlurRadiusValue.textContent = frostBlurRadius.value;
        document.documentElement.style.setProperty('--frost-blur-radius', `${frostBlurRadius.value}px`);

        // Noise distortion
        noiseFrequencyValue.textContent = noiseFrequency.value;
        filterEl.setAttribute('baseFrequency', `${noiseFrequency.value} ${noiseFrequency.value}`);
        noiseStrengthValue.textContent = noiseStrength.value;
        displacementEl.setAttribute('scale', noiseStrength.value);

        // Text settings
        document.documentElement.style.setProperty('--text-color', textColor.value);
        document.documentElement.style.setProperty('--text-size', `${textSize.value}px`);
        document.documentElement.style.setProperty('--text-weight', textWeight.value);
        document.documentElement.style.setProperty('--text-font-family', textFontFamily.value);

        // Update text opacity
        textOpacityValue.textContent = textOpacity.value;
        document.documentElement.style.setProperty('--text-opacity', textOpacity.value / 100);

        // Update text offset
        textOffsetXValue.textContent = textOffsetX.value;
        textOffsetYValue.textContent = textOffsetY.value;
        document.documentElement.style.setProperty('--text-offset-x', `${textOffsetX.value}px`);
        document.documentElement.style.setProperty('--text-offset-y', `${textOffsetY.value}px`);

        // Update text shadow value display
        textShadowXValue.textContent = textShadowX.value;
        textShadowYValue.textContent = textShadowY.value;
        textShadowBlurValue.textContent = textShadowBlur.value;
        textShadowOpacityValue.textContent = textShadowOpacity.value;

        // Generate text shadow style
        const shadowColor = `rgba(0, 0, 0, ${textShadowOpacity.value / 100})`;
        const shadowStyle = `${textShadowX.value}px ${textShadowY.value}px ${textShadowBlur.value}px ${shadowColor}`;
        document.documentElement.style.setProperty('--text-shadow', shadowStyle);

        // Update text content
        const textElement = glassDiv.querySelector('.glass-text');
        if (textElement) {
            if (elementType.value === 'ul' || elementType.value === 'ol') {
                // 处理列表类型
                const lines = glassText.value.split('\n').filter(line => line.trim());
                const listItems = lines.map(line => `<li>${line}</li>`).join('');
                textElement.innerHTML = listItems;
            } else {
                // 处理其他类型，支持HTML标签
                textElement.innerHTML = glassText.value;
            }
        } else {
            const newTextElement = document.createElement('div');
            newTextElement.className = 'glass-text';
            if (elementType.value === 'ul' || elementType.value === 'ol') {
                const lines = glassText.value.split('\n').filter(line => line.trim());
                const listItems = lines.map(line => `<li>${line}</li>`).join('');
                newTextElement.innerHTML = listItems;
            } else {
                newTextElement.innerHTML = glassText.value;
            }
            glassDiv.appendChild(newTextElement);
        }

        // Update code preview
        updateCodePreview();
    }

    // Color conversion function: Hex to RGB
    function hexToRgb(hex) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return {r, g, b};
    }

    // Update code preview
    function updateCodePreview() {
        const htmlCode = generateHtmlCode();
        const cssCode = generateCssCode();
        const vueProps = generateVueProps();
        const reactProps = generateReactProps();
        htmlCodePreview.textContent = htmlCode;
        cssCodePreview.textContent = cssCode;
        vuePropsPreview.textContent = vueProps;
        reactPropsPreview.textContent = reactProps;
    }

    function bindDragEvents(target) {
        let startX = 0, startY = 0;
        let isDragging = false;
        let initialLeft = 0, initialTop = 0;

        target.addEventListener('pointerdown', (e) => {
            e.preventDefault();
            const rect = target.getBoundingClientRect();
            const containerRect = document.querySelector('.glass-container').getBoundingClientRect();

            target.style.transition = 'none';
            startX = e.clientX;
            startY = e.clientY;
            initialLeft = rect.left - containerRect.left;
            initialTop = rect.top - containerRect.top;
            isDragging = true;
        });

        document.addEventListener('pointermove', (e) => {
            if (isDragging) {
                const deltaX = e.clientX - startX;
                const deltaY = e.clientY - startY;

                target.style.left = `${initialLeft + deltaX}px`;
                target.style.top = `${initialTop + deltaY}px`;
            }
        });

        document.addEventListener('pointerup', () => {
            if (isDragging) {
                target.style.transition = 'all 0.2s ease-out';
                isDragging = false;
            }
        });
    }

    // Generate HTML code
    function generateHtmlCode() {
        let content = '';
        if (elementType.value === 'ul' || elementType.value === 'ol') {
            const lines = glassText.value.split('\n').filter(line => line.trim());
            const listItems = lines.map(line => `  <li>${line}</li>`).join('\n');
            content = `\n  <div class="glass-text">\n${listItems}\n  </div>\n`;
        } else {
            content = `\n  <div class="glass-text">${glassText.value}</div>\n`;
        }

        return `<${elementType.value} class="liquid-glass">${content}</${elementType.value}>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="${noiseFrequency.value} ${noiseFrequency.value}" numOctaves="2" seed="92" result="noise" />
      <feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
      <feDisplacementMap in="SourceGraphic" in2="blurred" scale="${noiseStrength.value}" xChannelSelector="R" yChannelSelector="G" />
    </filter>
  </defs>
</svg>`;
    }

    // Generate CSS code
    function generateCssCode() {
        const tintRgb = hexToRgb(glassTintColor.value);
        const width = parseInt(glassWidthInput.value) || 0;
        const height = parseInt(glassHeightInput.value) || 0;
        const borderRadiusPercent = parseInt(glassBorderRadius.value) || 0;
        const borderRadiusValue = Math.min(width, height) * (borderRadiusPercent / 100);
        const shadowColor = `rgba(0, 0, 0, ${textShadowOpacity.value / 100})`;
        const shadowStyle = `${textShadowX.value}px ${textShadowY.value}px ${textShadowBlur.value}px ${shadowColor}`;

        let css = '';

        // 基础容器样式
        css += `
.liquid-glass {
  width: ${width}px;
  height: ${height}px;
  border-radius: ${borderRadiusValue}px;
  position: relative;
  isolation: isolate;
  box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}

.liquid-glass:focus {
  outline: none;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: ${borderRadiusValue}px;
  box-shadow: inset 0 0 ${innerShadowBlur.value}px ${innerShadowSpread.value}px ${innerShadowColor.value};
  background-color: rgba(${tintRgb.r}, ${tintRgb.g}, ${tintRgb.b}, ${glassTintOpacity.value / 100});
}

.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: ${borderRadiusValue}px;
  backdrop-filter: blur(${frostBlurRadius.value}px);
  -webkit-backdrop-filter: blur(${frostBlurRadius.value}px);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
}

.glass-text {
  position: relative;
  color: ${textColor.value};
  font-size: ${textSize.value}px;
  font-weight: ${textWeight.value};
  text-shadow: ${shadowStyle};
  opacity: ${textOpacity.value / 100};
  transform: translate(${textOffsetX.value}px, ${textOffsetY.value}px);
  font-family: ${textFontFamily.value};
}`;

        // 列表特定样式
        if (elementType.value === 'ul' || elementType.value === 'ol') {
            css += `
        .glass-text ul,
        .glass-text ol {
          list-style-position: inside;
          margin: 0;
          padding: 0;
          width: 100%;
        }

        `;

            if (elementType.value === 'ul') {
                css += `
          .glass-text ul li {
            list-style-type: disc;
          }`;
            } else {
                css += `
          .glass-text ol li {
            list-style-type: decimal;
          }`;
            }
        }

        return css;
    }

    // Generate Vue props code
    function generateVueProps() {
        const width = parseInt(glassWidthInput.value) || 0;
        const height = parseInt(glassHeightInput.value) || 0;
        const borderRadiusPercent = parseInt(glassBorderRadius.value) || 0;
        const tintRgb = hexToRgb(glassTintColor.value);
        const tintColor = `rgba(${tintRgb.r}, ${tintRgb.g}, ${tintRgb.b}, ${glassTintOpacity.value / 100})`;

        return `:width="${width}"
:height="${height}"
:borderRadius="${borderRadiusPercent}"
:innerShadowColor="'${innerShadowColor.value}'"
:innerShadowBlur="${innerShadowBlur.value}"
:innerShadowSpread="${innerShadowSpread.value}"
:glassTintColor="'${glassTintColor.value}'"
:glassTintOpacity="${glassTintOpacity.value}"
:frostBlurRadius="${frostBlurRadius.value}"
:noiseFrequency="${noiseFrequency.value}"
:noiseStrength="${noiseStrength.value}"`;
    }

    // Generate React props code
    function generateReactProps() {
        const width = parseInt(glassWidthInput.value) || 0;
        const height = parseInt(glassHeightInput.value) || 0;
        const borderRadiusPercent = parseInt(glassBorderRadius.value) || 0;
        const tintRgb = hexToRgb(glassTintColor.value);
        const tintColor = `rgba(${tintRgb.r}, ${tintRgb.g}, ${tintRgb.b}, ${glassTintOpacity.value / 100})`;

        return `width={${width}}
height={${height}}
borderRadius={${borderRadiusPercent}}
innerShadowColor="${innerShadowColor.value}"
innerShadowBlur={${innerShadowBlur.value}}
innerShadowSpread={${innerShadowSpread.value}}
glassTintColor="${tintColor}"
glassTintOpacity={${glassTintOpacity.value}}
frostBlurRadius={${frostBlurRadius.value}}
noiseFrequency={${noiseFrequency.value}}
noiseStrength={${noiseStrength.value}}`;
    }

    // Copy HTML code
    copyHtmlBtn.addEventListener('click', () => {
        const htmlCode = generateHtmlCode();
        navigator.clipboard.writeText(htmlCode).then(() => {
            copyHtmlSuccess.classList.add('show');
            setTimeout(() => {
                copyHtmlSuccess.classList.remove('show');
            }, 2000);
        });
    });

    // Copy CSS code
    copyCssBtn.addEventListener('click', () => {
        const cssCode = generateCssCode();
        navigator.clipboard.writeText(cssCode).then(() => {
            copyCssSuccess.classList.add('show');
            setTimeout(() => {
                copyCssSuccess.classList.remove('show');
            }, 2000);
        });
    });

    // Copy Vue props code
    copyVuePropsBtn.addEventListener('click', () => {
        const vueProps = generateVueProps();
        navigator.clipboard.writeText(vueProps).then(() => {
            copyVuePropsSuccess.classList.add('show');
            setTimeout(() => {
                copyVuePropsSuccess.classList.remove('show');
            }, 2000);
        });
    });

    // Copy React props code
    copyReactPropsBtn.addEventListener('click', () => {
        const reactProps = generateReactProps();
        navigator.clipboard.writeText(reactProps).then(() => {
            copyReactPropsSuccess.classList.add('show');
            setTimeout(() => {
                copyReactPropsSuccess.classList.remove('show');
            }, 2000);
        });
    });

    // Bind event listeners
    innerShadowColor.addEventListener('change', updateDisplay);
    innerShadowBlur.addEventListener('input', updateDisplay);
    innerShadowSpread.addEventListener('input', updateDisplay);
    glassTintColor.addEventListener('change', updateDisplay);
    glassTintOpacity.addEventListener('input', updateDisplay);
    frostBlurRadius.addEventListener('input', updateDisplay);
    noiseFrequency.addEventListener('input', updateDisplay);
    noiseStrength.addEventListener('input', updateDisplay);
    glassWidthInput.addEventListener('input', (e) => {
        const value = parseInt(e.target.value) || 0;
        e.target.value = value;
        updateDisplay();
    });
    glassHeightInput.addEventListener('input', (e) => {
        const value = parseInt(e.target.value) || 0;
        e.target.value = value;
        updateDisplay();
    });
    glassBorderRadius.addEventListener('input', updateDisplay);
    glassText.addEventListener('input', updateDisplay);
    textColor.addEventListener('change', updateDisplay);
    textSize.addEventListener('input', updateDisplay);
    textWeight.addEventListener('input', updateDisplay);
    textOpacity.addEventListener('input', updateDisplay);
    textOffsetX.addEventListener('input', updateDisplay);
    textOffsetY.addEventListener('input', updateDisplay);
    textShadowX.addEventListener('input', updateDisplay);
    textShadowY.addEventListener('input', updateDisplay);
    textShadowBlur.addEventListener('input', updateDisplay);
    textShadowOpacity.addEventListener('input', updateDisplay);
    elementType.addEventListener('change', updateDisplay);
    textFontFamily.addEventListener('change', updateDisplay);

    // Initialize display
    updateDisplay();

    // Glass block drag functionality
    let startX = 0, startY = 0;
    let isDragging = false;
    let initialLeft = 0, initialTop = 0;

    glassDiv.addEventListener('pointerdown', (e) => {
        e.preventDefault();
        const rect = glassDiv.getBoundingClientRect();
        const containerRect = document.querySelector('.glass-container').getBoundingClientRect();

        glassDiv.style.transition = 'none';
        startX = e.clientX;
        startY = e.clientY;
        initialLeft = rect.left - containerRect.left;
        initialTop = rect.top - containerRect.top;
        isDragging = true;
    });

    document.addEventListener('pointermove', (e) => {
        if (isDragging) {
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;

            glassDiv.style.left = `${initialLeft + deltaX}px`;
            glassDiv.style.top = `${initialTop + deltaY}px`;
        }
    });

    document.addEventListener('pointerup', () => {
        if (isDragging) {
            glassDiv.style.transition = 'all 0.2s ease-out';
            isDragging = false;
        }
    });

    // Mobile control panel expansion/collapse
    const controlPanel = document.getElementById('controlPanel');
    const controlPanelToggle = document.getElementById('controlPanelToggle');

    function isMobile() {
        return window.innerWidth <= 900;
    }

    function collapsePanel() {
        controlPanel.classList.remove('expanded');
    }

    function expandPanel() {
        controlPanel.classList.add('expanded');
    }

    controlPanelToggle.addEventListener('click', function () {
        if (controlPanel.classList.contains('expanded')) {
            collapsePanel();
        } else {
            expandPanel();
        }
    });
    // Default mobile side collapse
    if (isMobile()) {
        collapsePanel();
    }
    window.addEventListener('resize', function () {
        if (isMobile()) {
            collapsePanel();
        } else {
            controlPanel.classList.remove('expanded');
        }
    });

    // 點擊提示滾動到底部
    document.querySelector('.scroll-hint').addEventListener('click', function () {
        const panel = document.getElementById('controlPanel');
        panel.scrollTo({top: panel.scrollHeight, behavior: 'smooth'});
    });


    // 設定預設值
    liquidGlassList = [
        {//登录按钮
            id: 1,
            elementType: 'button',
            glassWidth: 180,
            glassHeight: 60,
            glassText: 'Login',
            backgroundImage: 'https://static.liquid-glass.pro/img/background-5.jpg'
        },
        {//有序列表
            id: 2,
            elementType: 'ol',
            glassWidth: 800,
            glassHeight: 200,
            glassText: '<strong>Liquid Glass</strong> is Apple\'s new UI design from WWDC 2025.\nIt features blur, transparency, and light reflection.\nUsed in iOS 26, macOS Sequoia, and more.\nGives a soft, glossy, glass-like look.\nIt\'s Apple\'s biggest visual update in years.',
            textSize: 22,
            textColor: '#374b86',
            backgroundImage: 'https://static.liquid-glass.pro/img/background-2.jpg'
        },
        {//文字显示
            id: 3,
            elementType: 'div',
            glassWidth: 650,
            glassHeight: 200,
            glassText: '<p>Liquid Glass is Apple\'s latest UI design language, introduced at WWDC 2025. It combines transparency, blur, and subtle reflections to create a sleek, glass-like appearance across iOS, macOS, and other platforms.</p>',
            textOpacity: 81,
            textWeight: 500,
            textOffsetX: 19,
            textFontFamily: "'Arial', 'Microsoft YaHei', '微软雅黑', serif",
            backgroundImage: 'https://static.liquid-glass.pro/img/background-3.jpg'
        },
    ]

    //从url获取参数
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    if (id) {
        const liquidGlass = liquidGlassList.find(item => item.id === parseInt(id));
        if (liquidGlass) {
            //把liquidGlass的属性赋值给对应的元素，如果属性没有值使用默认属性
            elementType.value = liquidGlass.elementType || 'div';
            glassWidthInput.value = liquidGlass.glassWidth || 300;
            glassHeightInput.value = liquidGlass.glassHeight || 200;
            glassText.value = liquidGlass.glassText || '';
            textSize.value = liquidGlass.textSize || 24;
            textWeight.value = liquidGlass.textWeight || 400;
            textColor.value = liquidGlass.textColor || '#ffffff';
            textOpacity.value = liquidGlass.textOpacity || 100;
            textOffsetX.value = liquidGlass.textOffsetX || 0;
            textFontFamily.value = liquidGlass.textFontFamily || "'Georgia', 'Microsoft YaHei', '微软雅黑', serif";
            let backgroundImage = liquidGlass.backgroundImage || 'https://static.liquid-glass.pro/img/background-5.jpg';
            document.body.style.backgroundImage = `url('${backgroundImage}')`;
            updateDisplay()
        }
    }
</script>
</body>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DSN0DWTXXE"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag('config', 'G-DSN0DWTXXE');
</script>
<script type="text/javascript">
    (function (c, l, a, r, i, t, y) {
        c[a] = c[a] || function () {
            (c[a].q = c[a].q || []).push(arguments)
        };
        t = l.createElement(r);
        t.async = 1;
        t.src = "https://www.clarity.ms/tag/" + i;
        y = l.getElementsByTagName(r)[0];
        y.parentNode.insertBefore(t, y);
    })(window, document, "clarity", "script", "rzoupd4oi8");
</script>
</html>
